<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, width=320px, user-scalable=no">
	<title>玫瑰</title>
	<script src="js/wen.js"></script>
	<style>
		html, body {
			overflow: hidden;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}
		@font-face {
            font-family: 'rosefont';
            src: url('font/rose.ttf') format('truetype');
        }
        #loading {
        	position: absolute;
        	top: 0;
			width: 100%;
			height: 100%;
			background: #00aeef url(images/loading.gif) center center no-repeat;
			background-size: 100% auto;
			color: #190d2f;
			font-size: 1rem;
			line-height: 20rem;
			text-align: center;
        }
        .wrap {
        	display: none;
        }
		.ready {
			position: absolute;
			top: 18%;
			width: 70%;
			margin: 12%;
			padding: 1rem 3% 1.5rem;
			background: url(images/starbg.png) center top no-repeat;
			background-size: cover;
			text-align: center;
			z-index: 102;
		}
		.ready em {
			display: inline-block;
			margin-top: 0.3rem; 
			padding: 0.4rem 0.6rem;
			border-radius: 0.3rem;
			background: #f36;
			color: rgba(255,255,255,0.8);
			font-size: 0.81rem;
		}
		.ready p span {
			display: inline-block;
			margin: 0 0.5rem;
			width: 1.4rem;
			height: 2.1rem;
			background: url(images/rose1.png) center center no-repeat;
			background-size: 100%;
			font-size: 0.81rem;
		}
		.ready p span:nth-child(2) {
			background: url(images/rose2.png) center center no-repeat;
			background-size: 100%;
		}
		.ready p {
			margin: 0.2rem 0;
			font-size: 0.81rem;
			line-height: 1.2rem;
		}
		.over {
			display: none;
			position: absolute;
			top: 23%;
			width: 70%;
			margin: 12%;
			padding: 1rem 3%;
			background: url(images/starbg.png) center top no-repeat;
			background-size: cover;
			text-align: center;
			z-index: 102;
		}
		.over em {
			display: inline-block;
			margin-top: 0.3rem; 
			padding: 0.4rem 1rem;
			border-radius: 0.3rem;
			background: #f36;
			color: rgba(255,255,255,0.8);
			font-size: 0.81rem;
		}
		.over p {
			margin: 0.3rem 0;
			font-size: 0.6rem;
			line-height: 1rem;
		}
		.over p span {
			display: inline-block;
			height: 2.1rem;
			background: url(images/rose1.png) left center no-repeat;
			background-size: 1.4rem 2.1rem;
			font-size: 1.2rem;
			line-height: 1.8rem;
			text-indent: 1.4rem;
		}
		.gg {
			overflow: hidden;
			position: absolute;
			top: 0px;
			width: 100%;
			height: 2.56rem;
			background: rgba(32,115,175, 0.8);
			color: #fff;
			font-size: 1.2rem;
			line-height: 2.56rem;
			font-weight: 700;
			text-align: center;
			z-index: 101;
		}
		.com {
			position: absolute;
			bottom: 0px;
			width: 100%;
			height: 1.71rem;
			background: rgba(32,115,175, 0.6);
			color: #fff;
			font-size: 0.8rem;
			line-height: 1.71rem;
			font-weight: 700;
			text-align: center;
			z-index: 101;
		}
		.game {
			position: relative;
			width: 100%;
			height: 100%;
		}
		.number {
			position: absolute;
			top: 3.2rem;
			left: 6%;
			width: 28%;
			height: 2.56rem;
		}
		.time {
			position: absolute;
			top: 3.2rem;
			right: 10%;
			width: 22%;
			height: 2.56rem;
		}
		.number span:nth-child(1), .time span:nth-child(1) {
			display: block;
			width: 100%;
			height: 0.74rem;
			color: #121212;
			font-size: 0.7rem;
			font-weight: 900;
			line-height: 0.74rem;
			text-indent: 1.5rem;
		}
		.number span:nth-child(2) {
			display: block;
			width: 100%;
			height: 1.8rem;
			background: url(images/rose3.png) left center no-repeat;
			background-size: 1.5rem 1.5rem;
			font-size: 1.5rem;
			line-height: 1.8rem;
			text-indent: 1.8rem;
			color: #fff;
			font-family: "rosefont";
		}
		.time span:nth-child(1) {
			text-align: center;
			text-indent: 0;
		}
		.number span:nth-child(2) var {
			margin-left: 0.2rem;
			color: #fff;
			font-family: "rosefont";
		}
		.time span var {
			color: #fff;
			font-size: 1.5rem;
			font-family: "rosefont";
			font-weight: 900;
		}
		.time span:nth-child(2) {
			display: block;
			width: 100%;
			height: 1.8rem;
			font-size: 1.5rem;
			line-height: 1.8rem;
			text-align: center;
		}
		/*掉落物品图片替换在此更换背景图*/
		.game .rose1 {
			position: absolute;
			top: 0;
			width: 1.71rem;
			height: 2.56rem;
			background: url(images/rose01.png) center center no-repeat;
			background-size: 100%;
			-webkit-transform: translate3D(0, 0,0);
			transform: translate3D(0, 0,0);
		}
		.game .rose2 {
			position: absolute;
			top: 0;
			width: 1.71rem;
			height: 2.56rem;
			background: url(images/rose2.png) center center no-repeat;
			background-size: 100%;
			-webkit-transform: translate3D(0, 0,0);
			transform: translate3D(0, 0,0);
		}
		.game .mogu {
			position: absolute;
			top: 0;
			width: 1.71rem;
			height: 2.56rem;
			background: url(images/mogu.png) center center no-repeat;
			/*background: url(images/rose04.png) center center no-repeat;*/
			background-size: 100%;
			-webkit-transform: translate3D(0, 0,0);
			transform: translate3D(0, 0,0);
		}
	</style>
</head>
<!-- 全屏背景图更换地方 -->
<body style="background: url(images/bg.png) center center no-repeat;background-size: 100% 100%;">
	<div id="loading">玩命加载中....</div>
	<div class="wrap" id="wrap">
		<div class="ready">
			<p>在右上角指定时间内</p>
			<p>手指点击玫瑰花，</p>
			<p>玫瑰花消失收集成功</p>
			<p><span></span><span></span></p>
			<em id="ready">开始游戏</em>
		</div>
		<div class="gg">广告一</div>
		<div class="game" id="game">
			<div class="number" id="number">
				<span>Rose</span>
				<span>x<var id="roseN">0</var></span>
			</div>
			<div class="time">
				<span>Time</span>
				<span><var>00</var><var>:</var><var id="second">30</var></span>
			</div>
		</div>
		<div class="over" id="over">
			<p>时间到了,看看你拿了多少个?</p>
			<p><span>×18</span></p>
			<em id="prize">确认</em>
		</div>
		<div class="com">广告二</div>
		<!-- 背景音乐 -->
		<audio src="music/bg.mp3" loop id="music1"></audio>
		<!-- 点击消失的音效 -->
		<audio src="music/boom.mp3" id="music2"></audio>
	</div>
	<script>
		// load部分的JS
		var load = document.getElementById('loading'),
			wrap = document.getElementById('wrap'),
			music1 = document.getElementById('music1');
			loadArr = [
				"rose1.png",
				"rose2.png",
				"rose3.png",
				"bg.png",
				"starbg.png",
				"mogu.png"
			];
		function inloading(arr,newbox,oldbox) {
			var a = 0;
			for(var i = 0;i < arr.length; i++){
				var r = new Image;
				r.src= "images/"+ arr[i],
				r.onload = function(){
					a++;
					if (a >= arr.length - 1) {
						setTimeout(function(){
							oldbox.style.display="none";
							newbox.style.display="block";
						},1000);
					};
				};
				r.onerror = function(){
					oldbox.innerHTML="网络太慢了~~,加载失败";
					}
				}
			};
		inloading(loadArr, wrap, load);

		// 开始 
		var ready = document.getElementById('ready');
		var haveRose = 0;
		ready.addEventListener("touchstart", function() {
			this.parentNode.style.display = "none";
			music1.play();
			var game = document.getElementById('game');
			var roseN = document.getElementById("roseN");
			// 调节速度
			var timeScoend = 32;
			// 生成玫瑰的时间间隔
			var wins = 900;
			//屏幕高度
			var maxTop = html.offsetHeight;
			// 倒计时模块
			var lastT = 30;
			//控制游戏是否结束
			var gameover = false;

			function roseCreate(n) {
				this.div = document.createElement("div");
				this.div.a = Math.round(Math.random()*5);
				switch(this.div.a) {
					case 0:
						this.div.className = "rose1";
						break;
					case 1:
						this.div.className = "rose2";
						break;
					case 2:
						this.div.className = "rose1";
						break;
					case 3:
						this.div.className = "rose2";
						break;
					case 4:
						this.div.className = "mogu";
						break;
				}
				this.div.style.webkitTransition = "opacity 0.3s, -webkit-transform " + (2.5 + lastT / 12) + "s linear";
				this.div.style.transition = "opacity 0.3s, transform " + (2.5 + lastT / 12) +"s linear";
				this.div.style.left = 2 + n*12+"%";
				this.div.topN = 0;
				this.div.addEventListener("touchstart", hidden);
				game.appendChild(this.div);
				
				var _this = this
				this.div.t = setTimeout(function() {
					move(_this)
				}, timeScoend);
				this.div.t2 = setTimeout(function() {
					claerDiv(_this.div)
				}, 8000);
			}

			function move(obj) {
				obj.div.style.webkitTransform = "translate3D(0px," + maxTop + "px, 0)";
				obj.div.style.transform = "translate3D(0px," + maxTop + "px, 0)";
			}

			var music2 = document.getElementById('music2');
			var number = document.getElementById('number')
			var numberH = number.offsetTop,
				numberW = number.offsetLeft;
			function hidden(e) {
				if (gameover || this.isHidden) {
					return;
				}
				event.stopPropagation();
				clearInterval(this.t);
				var w = numberW - this.offsetLeft;
				this.style.webkitTransition = "opacity 0.5s,-webkit-transform 0.3s";
				this.style.transition = "opacity 0.5s, transform 0.3s";
				this.style.webkitTransform = "translate3D(" + w + "px, " + numberH + "px, 0px)";
				this.style.transform = "translate3D(" + w + "px, " + numberH + "px, 0px)";
				this.style.opacity = "0";
				if (this.a != 4) {
					haveRose++;
				} else {
					haveRose--;
					if(haveRose < 0){
						haveRose = 0;
					}
				}
				roseN.innerHTML = haveRose + "";
				music2.play();
				var _this = this;
				this.isHidden = true;
				setTimeout(function() {
					claerDiv(_this);
				},1000);
			}

			function claerDiv(obj) {
				if(this.isHidden) {
					obj.parentNode.removeChild(obj);
				}
			}

			var wint;
			function star() {
				var c = Math.floor(Math.random()* 3 + 1);
				var arr = [];
				for (var i = 0; i < c; i++) {
					var b = Math.floor(Math.random()*8);
					for (var j= 0; j <= i; j++) {
						if (b === arr[j]) {
							i--;
							break;
						} else if (j == i) {
							arr[i] = b;
						}
					};
				};
				for (var i = 0; i < arr.length; i++) {
					new roseCreate(arr[i]);	
				};
				wins -= 12;
				wint = setTimeout(star, wins);
			}
			star();

			// 倒计时模块
			var lastTime = setInterval(changeTime, 1000);
			var scoend = document.getElementById('second');
			var over = document.getElementById('over');
			function changeTime() {
				lastT--;
				if (lastT >= 10) {
					second.innerHTML = lastT + "";
				} else if(lastT > 0) {
					second.innerHTML = "0" + lastT ;
				} else {
					gameover = true;
					over.style.display = "block";
					if(haveRose <= 0) {
						over.children[0].innerHTML = "你根本就没动，太让我失望了";
					} else if (haveRose < 10)  {
						over.children[0].innerHTML = "你技术好差，居然只拿了";
					} else if (haveRose < 20) {
						over.children[0].innerHTML = "你可以更快点的";
					} else if (haveRose < 40) {
						over.children[0].innerHTML = "技术不错啊,玩得挺认真啊"
					} else if (haveRose >= 40) {
						over.children[0].innerHTML = "看来是时间太短了"
					}
					over.children[1].children[0].innerHTML = "×" + haveRose;
					second.innerHTML = "00";
					setTimeout(function() {
						clearInterval(wint);
						clearInterval(lastTime);
					}, 1000);
				}
			}
		})

		// 前后台数据交互
		var prize = document.getElementById('prize');
		prize.addEventListener("touchstart", function() {
			window.location.reload();
		})
	</script>
</body>
</html>